<template>

	<view style="margin-top: -10px;">

		<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in seniorList" :key="item.id"
			@click="goProDetail(item)">

			<!-- 头部视图 -->
			<view style="margin-left: 0px; border-bottom: 1px solid #f0f0f0;">
				<div style="display: flex;">
					<div class="topTitleV">{{item[headerKey] || ''}}</div>
					<div class="cellView">
						{{bindOneTag(item)}}
					</div>
				</div>

				<!-- 简介 -->
				<view style="display: flex; margin-top: 2px">

					<view style="color: #999999;font-size: 13px;margin-top: 4px; width: 70px;">
						{{bannerOption.label||'说明' }}：
					</view>
					<view
						style="color: #333333;font-size: 13px;margin-top: 4px; margin-left: 3px; width: calc(100vw - 108px);  max-height:26px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
						{{ ZJNoEmptyString(item[bannerOption.key]) + "" }}
					</view>
				</view>
			</view>

			<view class="content_wrap">
				<view class="item_wrap" v-for="(el, index) in listOption" :key="index + '100'"
					:style="{ width: itemWidth || '33%' }">
					<ccUpDownText :upText='el.label' :downText='ZJNoEmptyString(item[el.key], el)'></ccUpDownText>
				</view>
				<button class="cu-btn bg-green view_btn sm" @click.stop="viewDetail(item)" v-if="isViewBtn">
					<text class="cuIcon-search "></text>
					查看
				</button>
				<button class="cu-btn bg-red view_btn sm" @click.stop="handleDelete(item)" v-if="isDelBtn">
					<text class="cuIcon-delete "></text>
					删除
				</button>
			</view>



		</view>

	</view>

</template>


<script>
	import ccUpDownText from "./ccUpDownText.vue"

	export default {
		components: {
			ccUpDownText
		},
		props: {
			seniorList: {
				type: Array,
				default () {
					return []
				}
			},
			itemWidth: String,
			headerKey: String,
			isViewBtn: Boolean,
			isDelBtn: Boolean,
			tabKey: String,
			bannerOption: Object,
			listOption: Array,
		},
		data() {
			return {

			}
		},
		methods: {
			ZJNoEmptyString(obj, option) {
				if (option && option.options) {
					if (!obj) return
					const str = option.options.find(el => el.value == obj).label
					return str
				}
				let str = '--';
				if (typeof(obj) == "undefined" || (obj) === null || (obj) === '') {
					return str;
				}
				return obj + "";
			},

			goProDetail(item) {
				this.$emit('itemClick', item)
			},

			viewDetail(item) {
				this.$emit('getDetail', item)
			},
			handleDelete(item) {
				this.$emit('deleteItem', item)
			},

			bindOneTag(item) {
				return item[this.tabKey] || '无'
			},
		}
	}
</script>

<style scoped>
	.uni-list-cell {
		margin-top: 10px;
		background-color: white;
		padding: 8px 12px;
		border-radius: 10px;
	}

	.topTitleV {
		height: 26px;
		line-height: 24px;
		width: auto;
		color: #333333;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 550;
		font-size: 16px;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.cellView {
		margin-top: 3px;
		margin-left: 8px;
		height: 22px;
		line-height: 22px;
		text-align: center;
		border-radius: 2px;
		padding: 0px 5px !important;
		font-size: 12px;
		border-radius: 4px;
		color: rgb(180, 138, 85);
		background: rgb(245, 237, 224);
	}

	.content_wrap {
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

	.view_btn {
		position: absolute;
		right: 10px;
		bottom: 28px;
	}
</style>